import { Button, CapsuleTabs, Input, NavBar, Popup, Steps } from 'antd-mobile'
import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './index.module.css'
function index() {
  const { Step } = Steps
  const nav = useNavigate()
  const { state } = useLocation()
  const [visible1, setVisible1] = useState(false)
  const [pl,setPl]=useState('')
  const [xr,setXr]=useState([])
  return (
    <div>
      {/* 头部标题 */}
      <NavBar onBack={() => nav(-1)}>详情页</NavBar>
      <div>
        <span onClick={() => setVisible1(true)}>车次经过信息</span>
        {/* 渲染列表 */}
        <div className={styles.list}>
          <div className={styles.list1}><span>{state.start}</span></div>
          <div className={styles.list1}><span>{state.end}</span></div>
          <div className={styles.list1}><span>{state.startTime}</span></div>
          <div>
            <span className={styles.list2}>￥{state.tick?.vip}</span><br />
            <span className={styles.list2}>￥{state.tick?.firstTick}</span><br />
            <span className={styles.list2}>￥{state.tick?.secondTick}</span><br />
          </div>
        </div>
      </div>
      <div>
        <h4>其他换乘方案</h4>
        <CapsuleTabs>
          <CapsuleTabs.Tab title='一等座' key='fruits' />
          <CapsuleTabs.Tab title='二等座' key='vegetables' />
          <CapsuleTabs.Tab title='商务座' key='animals' />
        </CapsuleTabs>
      </div>
      {/* 选择乘车人 */}
      <div>
        <Button onClick={()=>nav('/penple')}>选择乘车人</Button>
      </div>
      {/* 发表评论 */}
      <div>
        <Input placeholder="请输入内容" value={pl} onChange={(val)=>setPl(val)}></Input>
        <Button block color='success' size='mini' onClick={()=>{setXr(pre=>[...pre,pl]),setPl('')}}>发表评论</Button>
        {
          xr.map((v,i)=>{
            return (
              <div key={i}>
                <div>{v}</div>
              </div>
            )
          })
        }
      </div>
      {/* 弹窗 */}
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        showCloseButton
        onClose={() => {
          setVisible1(false)
        }}
      >
        <Steps direction='vertical'>
          <h4>列车国展时间表</h4>
          <Step
            title='北京'
            status='finish'
            description='经过时间：2025-10-1 0:05'
          />
          <Step
            title='石家庄'
            status='finish'
            description='经过时间：2025-10-1 3:25'
          />
          <Step
            title='郑州'
            status='finish'
            description='经过时间：2025-10-1 6:24'
          /> 
           <Step
            title='武汉'
            status='finish'
            description='经过时间：2025-10-1 10:33'
          /> 
           <Step
            title='长沙'
            status='finish'
            description='经过时间：2025-10-1 14:12'
          /> 
        </Steps>
      </Popup>
    </div>
  )
}

export default index